<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增投票页面</title>
    <link rel="stylesheet" type="text/css" href="css/el-index.css"/>
<!--    <link rel="stylesheet" type="text/css" href="css/login.css"/>-->
</head>
<body>
<div id="father">
    <h2>新增投票页面</h2>
    <el-form ref="voteForm" :model="voteActivity" label-width="80px" enctype="multipart/form-data">
        <el-form-item label="活动名称">
            <el-input v-model="voteActivity.votename"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
            <el-date-picker
                    v-model="voteActivity.votestart"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
            <el-date-picker
                    v-model="voteActivity.voteend"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="每人投票数">
            <el-input v-model="voteActivity.votenum"></el-input>
        </el-form-item>
        <el-form-item label="投票方式">
            <el-radio-group v-model="voteActivity.votetype">
                <el-radio label="0">一次</el-radio>
                <el-radio label="1">每天</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动信息">
            <el-input v-model="voteActivity.voteinfo"></el-input>
        </el-form-item>
        <el-form-item label="投票总数">
            <el-input v-model="voteActivity.votetotal"></el-input>
        </el-form-item>
        <el-form-item label="主题图片">
            <input type="file" @change="upload"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="resetForm('voteForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<script src="js/vue.js"></script>
<script src="js/el-index.js"></script>
<script src="js/axios.min.js"></script>
<script>
    //注意：先创建表单对象---用于装入我们的数据
    var formData = new FormData();
    //创建vue对象
    var app = new Vue({
        //挂载点
        el:"#father",
        //数据
        data:{
            //投票活动 对象
            voteActivity:{}
        },
        //方法
        methods:{
            //文件上传--把文件装入到我们自定义的表单数据
            upload(event){
                var file = event.target.files[0];
                formData.append("file",file);
                console.log(formData.get("file").name);
            },
            //提交注册表单
            onSubmit(){
                //把数据装入到我们自定义的表单数据
                // formData.append("voteName",this.voteActivity.voteName);
                // formData.append("voteStart",this.voteActivity.voteStart);
                // formData.append("voteEnd",this.voteActivity.voteEnd);
                // formData.append("voteNum",this.voteActivity.voteNum);
                // formData.append("voteType",this.voteActivity.voteType);
                // formData.append("voteInfo",this.voteActivity.voteInfo);
                // formData.append("voteTotal",this.voteActivity.voteTotal);
                //简化写法
                for(key in this.voteActivity){
                    formData.append(key,this.voteActivity[key]);
                }
                //执行ajax提交
                axios.post("voteactivity/add",formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }}).then(
                    function (res) {
                        console.log(res);
                        if(res.data.message=="200"){
                            alert("新增投票活动成功！");
                        }
                    }
                )
            },
            //重置登录表单
            resetForm(formName){
                //固定写法--调用vue的函数-重置字段
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>
</html>